import throttle from 'element-ui/node_modules/throttle-debounce/debounce'
import {
  isHtmlElement,
  isFunction,
  isUndefined,
  isDefined
} from 'element-ui/src/utils/types'
import {
  getScrollContainer
} from 'element-ui/src/utils/dom'

const getStyleComputedProperty = (element, property) => {
  if (element === window) {
    element = document.documentElement
  }

  if (element.nodeType !== 1) {
    return []
  }
  // NOTE: 1 DOM access here
  const css = window.getComputedStyle(element, null)
  return property ? css[property] : css
}

const entries = (obj) => {
  return Object.keys(obj || {})
    .map(key => ([key, obj[key]]))
}

const getPositionSize = (el, prop) => {
  return el === window || el === document
    ? document.documentElement[prop]
    : el[prop]
}

const getOffsetHeight = el => {
  return getPositionSize(el, 'offsetHeight')
}

// 横向滚动
const getOffsetWidth = el => {
  return getPositionSize(el, 'offsetWidth')
}

const getClientHeight = el => {
  return getPositionSize(el, 'clientHeight')
}

// 横向滚动
const getClientWidth = el => {
  return getPositionSize(el, 'clientWidth')
}

const scope = 'BKInfiniteScroll'
const attributes = {
  delay: {
    type: Number,
    default: 200
  },
  distance: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  },
  immediate: {
    type: Boolean,
    default: true
  },
  scroll: {
    type: String,
    default: 'y'
  }
}

const getScrollOptions = (el, vm) => {
  if (!isHtmlElement(el)) return {}

  return entries(attributes).reduce((map, [key, option]) => {
    const { type, default: defaultValue } = option
    let value = el.getAttribute(`infinite-scroll-${key}`)
    value = isUndefined(vm[value]) ? value : vm[value]
    switch (type) {
      case Number:
        value = Number(value)
        value = Number.isNaN(value) ? defaultValue : value
        break
      case Boolean:
        value = isDefined(value) ? value === 'false' ? false : Boolean(value) : defaultValue
        break
      default:
        value = type(value)
    }
    map[key] = value
    return map
  }, {})
}

const getElementTop = el => el.getBoundingClientRect().top
// 横向滚动
const getElementLeft = el => el.getBoundingClientRect().left

const handleScroll = function (cb) {
  const { el, vm, container, observer } = this[scope]
  if (!el.offsetHeight) return
  const { distance, disabled, scroll } = getScrollOptions(el, vm)
  if (disabled) return

  const containerInfo = container.getBoundingClientRect()
  if (!containerInfo.width && !containerInfo.height) return

  let shouldTrigger = false
  if (container === el) {
    // 横向滚动
    if (scroll === 'x') {
      const scrollLeft = container.scrollLeft + getClientWidth(container)
      shouldTrigger = container.scrollWidth - scrollLeft <= distance
      console.log(container.scrollWidth - scrollLeft, distance, shouldTrigger)
    } else if (scroll === 'y') {
      // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
      const scrollBottom = container.scrollTop + getClientHeight(container)
      shouldTrigger = container.scrollHeight - scrollBottom <= distance
    }
  } else {
    // 横向滚动
    if (scroll === 'x') {
      const widthBelowLeft = getOffsetWidth(el) + getElementLeft(el) - getElementLeft(container)
      const offsetWidth = getOffsetWidth(container)
      const borderRight = Number.parseFloat(getStyleComputedProperty(container, 'borderRightWidth'))
      shouldTrigger = widthBelowLeft - offsetWidth + borderRight <= distance
    } else if (scroll === 'y') {
      const heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container)
      const offsetHeight = getOffsetHeight(container)
      const borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'))
      shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance
    }
  }

  if (shouldTrigger && isFunction(cb)) {
    cb.call(vm)
  } else if (observer) {
    observer.disconnect()
    this[scope].observer = null
  }
}

export default {
  name: 'bk-scroll',
  inserted (el, binding, vnode) {
    const cb = binding.value

    const vm = vnode.context
    // only include vertical scroll
    const { delay, immediate, scroll } = getScrollOptions(el, vm)
    const container = getScrollContainer(el, scroll === 'y')
    const onScroll = throttle(delay, handleScroll.bind(el, cb))

    el[scope] = { el, vm, container, onScroll }

    if (container) {
      container.addEventListener('scroll', onScroll)

      if (immediate) {
        const observer = el[scope].observer = new MutationObserver(onScroll)
        observer.observe(container, { childList: true, subtree: true })
        onScroll()
      }
    }
  },
  unbind (el) {
    const { container, onScroll } = el[scope]
    if (container) {
      container.removeEventListener('scroll', onScroll)
    }
  }
}
